<template>
	<view class="app">
		<uni-notice-bar speed="50" show-icon scrollable
								text="欢迎使用本公司设备,有问题请随时咨询客服13613814961(微信同号)" />
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="a-device"
			field="imei,name,balance,regist_date,expiry_date,openid,interval,num,tel1,tel2,tel3"
			:where="`openid=='${openid}'`">
			<view>
			
				<view v-for="(item, index) in data" style="background-color:gainsboro;margin-top: 10px;">
					<view style="font-size: 26rpx;
		margin: 5px 0px;
		background-color:white;
		padding: 8px;
		height: 66px;scroll-snap-type: none;">

						<view>编号：{{item.imei}}<span style="">/{{item.name}}</span><br />

							到期时间：<span style="color: red;">
								<uni-dateformat :date="item.expiry_date" format="yyyy-MM-dd"></uni-dateformat>

							</span>
							/余额<span style="color: green;">：{{item.balance}}元</span>
						</view>
						<view style="margin-top: 10px;">

							<view style="width: 32%;text-align: center;float: right;">

								<text style="color: blue;"></text>
							</view>
							<view style="width:1%;float: right;color:gainsboro;">|</view>
							<view style="width: 32%;text-align: center;float: right;"
								@click="opendialog('wxpay',item.imei)">

								<text style="color: lightseagreen;">话费充值</text>
							</view>
							<view style="width:1%;float: right;color:gainsboro;">|</view>
							<view style="width: 32%;text-align: center;float: right;"
								@click="opendialogyear('wxpay',item.imei)">

								<text style="color: red;">年费充值</text>
							</view>
							<view style="width:1%;float: right;color:gainsboro;">|</view>
						</view>

					</view>


				</view>



			</view>
		</unicloud-db>
		<uni-popup ref="popup" type="center" background-color="#fff" border-radius="10px 10px 0 0" >
<!-- 			<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close"
				@confirm="confirm" value="10"></uni-popup-dialog> -->
			<view style="padding: 20px 20px;">
				<view class="uni-form-item uni-column">
								<view class="title">请输入充值金额(元)：</view><br/>
								<input class="uni-input" id="num" type="number" v-model="num" />
							</view>
							<br/>
					       <view class="button-sp-area">
									
									<button class="mini-btn"  size="mini" @click="changeNum(10)">10元</button>
									<button class="mini-btn"  size="mini" @click="changeNum(20)">20元</button>
									<button class="mini-btn"  size="mini" @click="changeNum(50)">50元</button>
								</view>		
							
							
							<br/>
							
				<view style="color: dimgray;"><span style="color:red">注意：话费</span>最小充值金额为10元且必须为整数,可手动定义充值金额，话费可用短信和电话通知。</view>
				<br/>
				<button type="primary" style="width: 50%;text-align: center;" @click="confirm(num,'recharge')">充值</button>
				<button type="default" style="width: 50%;text-align: center;" @click="close()">先不充了</button>
				</view>
		</uni-popup>

		<uni-popup ref="popup_year" type="center" background-color="#fff" border-radius="10px 10px 0 0" >
		<!-- 			<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close"
						@confirm="confirm" value="10"></uni-popup-dialog> -->
					<view style="padding: 20px 20px;">
						<view class="uni-form-item uni-column">
										<view class="title">请选择充值年数(元)：</view><br/>
										<input class="uni-input" id="num" type="number" disabled="true" :value="num_year" />
									</view>
									<br/>
							       <view class="button-sp-area">
											
											<button class="mini-btn"  size="mini" @click="changeNumYear(12)">一年12元</button>
											<button class="mini-btn"  size="mini" @click="changeNumYear(24)">两年24元</button>
											<button class="mini-btn"  size="mini" @click="changeNumYear(36)">三年36元</button>
										</view>		
									
									
									<br/>
									
						<view style="color: dimgray;"><span style="color:red">注意：年费</span>最小充值一年,可用于延长服务时间，年费与话费不同，不能用于短信和电话通知，如需充话费请选择话费充值。</view>
						<br/>
						<button type="primary" style="width: 50%;text-align: center;" @click="confirmYear(num_year,'year')">确认充值</button>
						<button type="default" style="width: 50%;text-align: center;" @click="close_year()">先不充了</button>
						</view>
				</uni-popup>
		<!-- 统一支付组件，注意：vue3下ref不可以等于组件名，因此这里ref="pay" 而不能是 ref="uniPay" -->
		<uni-pay ref="pay" :adpid="adpid" return-url="/pages/order-detail/order-detail" logo="/static/logo.png"
			@success="onSuccess" @create="onCreate"></uni-pay>
	</view>
</template>

<script>
	const db = uniCloud.database()
	let tbl_device = db.collection("a-device")
	export default {
		data() {
			return {
				total_fee: 1, // 支付金额，单位分 100 = 1元
				order_no: "", // 业务系统订单号（即你自己业务系统的订单表的订单号）
				out_trade_no: "", // 插件支付单号
				description: "", // 支付描述
				type: "recharge", // 支付回调类型 year代表年费充值 recharge 代表余额充值 goods 代表商品订单（可自定义，任意英文单词都可以，只要你在 uni-pay-co/notify/目录下创建对应的 xxx.js文件进行编写对应的回调逻辑即可）
				//qr_code: true, // 是否强制使用扫码支付
				openid: "", // 微信公众号需要
				custom: {
					type: "余额充值", //余额充值、年费充值
				},
				provider: '',
				imei: '',
				num:10,
				num_year:12,//年费默认12元
				list: [],
				adpid: "1000000001", // uni-ad的广告位id
			}
		},
		async onReady(options = {}) {
			var url = window.location.href; //获取当前url
			var dz_url = url.split('#')[0]; //获取#/之前的字符串
			var cs = dz_url.split('?')[1]; //获取?之后的参数字符串
			if (cs == undefined) {
				await this.getWeiXinJsCode('snsapi_base')
			} else {
				var cs_arr = cs.split('&'); //参数字符串分割为数组
				var cs = {};
				for (var i = 0; i < cs_arr.length; i++) { //遍历数组，拿到json对象
					cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
				}
				options.code = cs.code
				options.state = cs.state
			}
			if (options.code && options.state) {
				// 获取微信公众号的openid
			
				await	this.getOpenid({
						provider: "wxpay",
						code: options.code
					});
				
			}
			this.$refs.udb.loadData()
		},
		methods: {

			navigateTo(path) {
				uni.navigateTo({
					url:path
				})
			},
			changeNum(num){
				this.num=num	
			},
			changeNumYear(num_year){
				this.num_year=num_year	
			},
			opendialog(provider, imei) {
				this.imei = imei
				this.$refs.popup.open()

			},
			opendialogyear(provider, imei) {
				this.imei = imei
				this.$refs.popup_year.open()

			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			close_year() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup_year.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(num,type) {
				// 输入框的值
				if(num<10){
					alert("充值金额不能小于10元")
				}else{
				this.createOrder('wxpay', this.imei, num,type)
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...

				this.$refs.popup.close()
				}
			},
			confirmYear(num,type) {
				// 输入框的值
				if(num<12){
					alert("至少支付一年费用12元")
				}else{
				this.createOrder('wxpay', this.imei, num,type)
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
			
				this.$refs.popup_year.close()
				}
			},
			/**
			 * 发起支付（唤起收银台，如果只有一种支付方式，则收银台不会弹出来，会直接使用此支付方式）
			 * 在调用此api前，你应该先创建自己的业务系统订单，并获得订单号 order_no，把order_no当参数传给此api，而示例中为了简化跟支付插件无关的代码，这里直接已时间戳生成了order_no
			 */
			open() {
				this.order_no = `test` + Date.now();
				this.out_trade_no = `${this.order_no}-1`

				// 打开支付收银台
				this.$refs.pay.open({
					total_fee: this.total_fee, // 支付金额，单位分 100 = 1元（注意：因为是前端传的，此参数可能会被伪造，回调时需要再校验下是否和自己业务订单金额一致）
					order_no: this.order_no, // 业务系统订单号（即你自己业务系统的订单表的订单号）
					out_trade_no: this.out_trade_no, // 插件支付单号
					description: this.description, // 支付描述
					type: this.type, // 支付回调类型
					qr_code: this.qr_code, // 是否强制使用扫码支付
					openid: this.openid, // 微信公众号需要
					custom: this.custom, // 自定义数据（此参数不推荐使用，因为是前端传的，此参数可能会被伪造，建议通过order_no查询自己业务订单表来获取自定义业务数据）
				});
			},
			/**
			 * 发起支付（不唤起收银台，手动指定支付方式）
			 * 在调用此api前，你应该先创建自己的业务系统订单，并获得订单号 order_no，把order_no当参数传给此api，而示例中为了简化跟支付插件无关的代码，这里直接已时间戳生成了order_no
			 */
			createOrder(provider, imei, total_fee,type) {
				this.order_no = `test` + Date.now();
				this.out_trade_no = `${this.order_no}-1`;
				this.description = imei
				let num = parseInt(total_fee, 10);
				// 发起支付
				this.$refs.pay.createOrder({
					provider: provider, // 支付供应商
					total_fee: num * 100, // 支付金额，单位分 100 = 1元（注意：因为是前端传的，此参数可能会被伪造，回调时需要再校验下是否和自己业务订单金额一致）
					//total_fee: num, 
					order_no: this.order_no, // 业务系统订单号（即你自己业务系统的订单表的订单号）
					out_trade_no: this.out_trade_no, // 插件支付单号
					description: this.description, // 支付描述
					type: type, // 支付回调类型
					qr_code: this.qr_code, // 是否强制使用扫码支付
					openid: this.openid, // 微信公众号需要
					custom: this.custom, // 自定义数据（此参数不推荐使用，因为是前端传的，此参数可能会被伪造，建议通过order_no查询自己业务订单表来获取自定义业务数据）
				});
			},
			// 查询支付状态
			async getOrder() {
				let res = await this.$refs.pay.getOrder({
					out_trade_no: this.out_trade_no, // 插件支付单号
					await_notify: true
				});
				if (res) {
					let obj = {
						"-1": "已关闭",
						"1": "已支付",
						"0": "未支付",
						"2": "已部分退款",
						"3": "已全额退款"
					};
					uni.showToast({
						title: obj[res.status] || res.errMsg,
						icon: "none"
					});
				}
			},
			// 发起退款
			async refund() {
				let res = await this.$refs.pay.refund({
					out_trade_no: this.out_trade_no, // 插件支付单号
				});
				if (res) {
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					});
				}
			},
			// 查询退款状态
			async getRefund() {
				let res = await this.$refs.pay.getRefund({
					out_trade_no: this.out_trade_no, // 插件支付单号
				});
				if (res) {
					uni.showModal({
						content: res.errMsg,
						showCancel: false
					});
				}
			},
			// 关闭订单
			async closeOrder() {
				let res = await this.$refs.pay.closeOrder({
					out_trade_no: this.out_trade_no, // 插件支付单号
				});
				if (res) {
					uni.showModal({
						content: res.errMsg,
						showCancel: false
					});
				}
			},
			// 获取公众号code
			async getWeiXinJsCode(scope = "snsapi_base") {
				let res = await this.$refs.pay.getProviderAppId({
					provider: "wxpay",
					provider_pay_type: "jsapi"
				});
				if (res.appid) {
					let appid = res.appid;
					//let redirect_uri = encodeURI(window.location.href.split("?")[0]);
					let redirect_uri = encodeURIComponent('https://iot.ixingyue.com/weixin/#/pages/pay/pay/')
					let url =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&response_type=code&scope=${scope}&redirect_uri=${redirect_uri}&state=STATE#wechat_redirect`;
					window.location.href = url;
				}

			},
			// 获取公众号openid
			async getOpenid(data) {
				let res = await this.$refs.pay.getOpenid(data);
				if (res) {
					this.openid = res.openid;
					// uni.showToast({
					// 	title: "已获取到openid，可以开始支付",
					// 	icon: "none"
					// });
				}
			},
			// 监听事件 - 支付订单创建成功（此时用户还未支付）
			onCreate(res) {
				console.log('create: ', res);
				// 如果只是想生成支付二维码，不需要组件自带的弹窗，则在这里可以获取到支付二维码 qr_code_image
			},
			// 监听事件 - 支付成功
			async onSuccess(res) {
				if (res.user_order_success) {
					// 代表用户已付款，且你自己写的回调成功并正确执行了
					//增加设备账户余额
						let conf = await tbl_device.where({
							imei: res.pay_order.description
						}).get({
							getOne: true
						})	
					
					if(res.pay_order.type=="year"){
						  const date = new Date(conf.result.data.expiry_date);
					      date.setFullYear(date.getFullYear() + res.pay_order.total_fee/1200);
						let res_upd = await tbl_device.where({
								imei: res.pay_order.description
							})
							.update({
								expiry_date: date,
							});
						this.$refs.udb.refresh()			
					}
					if(res.pay_order.type=="recharge"){
					
					let res_upd = await tbl_device.where({
							imei: res.pay_order.description
						})
						.update({
							balance: conf.result.data.balance + res.pay_order.total_fee / 100,
						});
					this.$refs.udb.refresh()		

				} 
				}else {
					// 代表用户已付款，但你自己写的回调执行成功（通常是因为你的回调代码有问题）

				}
			}
		},
		computed: {
			h5Env() {
				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger' && (ua.match(/miniprogram/i) == 'miniprogram')) {
					// 微信小程序
					return "mp-weixin";
				}
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					// 微信公众号
					return "h5-weixin";
				}
				if (ua.match(/alipay/i) == 'alipay' && ua.match(/miniprogram/i) == 'miniprogram') {
					return "mp-alipay";
				}
				if (ua.match(/alipay/i) == 'alipay') {
					return "h5-alipay";
				}
				// 外部 H5
				return "h5";
				// #endif
			}
		},
	}
</script>

<style lang="scss" scoped>
	.app {
		padding: 30rpx;
	}

	input {
		border: 1px solid #f3f3f3;
		padding: 10rpx;
	}

	button {
		margin-top: 20rpx;
	}

	.label {
		margin: 10rpx 0;
	}

	.tips {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #565656;
	}

	.card-actions-item {
		float: left;
		width: 25%;
		margin-right: 16px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.mini-btn{
		margin-right:16px ;
	}
</style>